<template>
  <div>
    <div :class="{ mask: flag }"></div>
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      style="margin-bottom: 15px"
    >
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="10">
        <el-col :span="6"
          ><el-input
            placeholder="请输入内容"
            v-model="queryInfo.query"
            clearable
            @clear="getGoodsList"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="
                getGoodsList();
              "
            ></el-button> </el-input
        ></el-col>
        <el-col :span="13">
          <el-button type="primary" @click="jumpAdd" v-show="false"
            >添加商品</el-button
          >
        </el-col>

        <el-col :span="3" style="float:right">
          护眼模式：
          <el-switch
            v-model="value"
            active-color="#409eff"
            inactive-color="grey"
            @change="changeColor"
          >
          </el-switch>
        </el-col>
      </el-row>

      <div>
        <el-table
          :data="tableData"
          stripe
          border
          style="width: 100%; margin-top: 15px"
        >
          <el-table-column
            fixed
            type="index"
            label="序号"
            width="49"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="goods_name" label="商品名称" width="930">
            <!-- v-for="(item, index) in data"
            :key="index"
            v-html="item.goods_name" -->
          </el-table-column>
          <el-table-column
            prop="goods_price"
            label="商品价格(元)"
            align="center"
            width="105"
          >
          </el-table-column>
          <el-table-column prop="goods_weight" label="商品重量" align="center">
          </el-table-column>
          <el-table-column
            :formatter="formatter"
            label="创建时间"
            width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <!-- <el-button size="mini" type="primary">编辑</el-button> -->

              <el-button
                size="mini"
                type="danger"
                @click="removeByID(scope.row.goods_id)"
                icon="el-icon-delete"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer" style="text-align: center; margin-top: 15px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="queryInfo.pagesize"
          layout="total,sizes, prev, pager, next,jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
// import { listAPI } from "@/api";
import { listAPI } from "@/api";
// import { deleteAPI } from "@/api";
import axios from "axios";

export default {
  data() {
    return {
      tableData: [],
      currentPage1: 1,
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 10,
      },
      total: 0,
      value: false,
      flag: false,
    };
  },
  created() {
    this.getGoodsList();
  },
  methods: {
    // inputChange() {
    //   this.queryInfo.query.split('').forEach(data => {
    //     this.tableData.forEach(item =>{
    //       if(item.indexOf(data) == -1)
    //       return;
    //        let highstr = `<span style = "color:skyblue">${data}</span>`
    //        let str =new RegExp(data, 'gi');
    //        item.name = item.name.replace(str,highstr)
    //     })
    //   })
    // },
    changeColor() {
      this.flag = !this.flag;
    },
    // 获取商品列表
    async getGoodsList() {
      // console.log(1)
      const { data: res } = await listAPI({
        query: this.queryInfo.query,
        pagenum: this.queryInfo.pagenum,
        pagesize: this.queryInfo.pagesize,
      });
      if (res.meta.status !== 200) {
        return this.$message.error("获取商品列表失败！");
      }
      this.$message.success("获取商品列表成功！");
      console.log(res);
      this.tableData = res.data.goods;
      this.total = res.data.total;
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    // 根据分页获取对应的商品列表
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.getGoodsList();
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      this.getGoodsList();
    },
    // 格式化时间
    formatter(row, column) {
      let today = new Date(row.add_time * 1000);

      //日期
      let DD = String(today.getDate()).padStart(2, "0"); // 获取日
      let MM = String(today.getMonth() + 1).padStart(2, "0"); //获取月份，1 月为 0
      let yyyy = today.getFullYear(); // 获取年

      // 时间
      let hh = String(today.getHours()).padStart(2, "0"); //获取当前小时数(0-23)
      let mm = String(today.getMinutes()).padStart(2, "0"); //获取当前分钟数(0-59)
      let ss = String(today.getSeconds()).padStart(2, "0"); //获取当前秒数(0-59)
      today = yyyy + "-" + MM + "-" + DD + " " + hh + ":" + mm + ":" + ss;
      return today;
    },
    async removeByID(id) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该商品, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult != "confirm") {
        return this.$message.info("已取消删除");
      }
      await axios({
        method: "delete",
        url: `goods/${id}`,
      });
      // this.getGoodsList()
      // this.$http.delete(`goods/${id}`)

      // if(res.meta.status !== 200){
      //   return this.$message.error('删除失败!');

      // }
      this.$message.success("删除成功!");
      this.getGoodsList();
      // .then(() => {
      //   this.$message({
      //     type: "success",
      //     message: "删除成功!",
      //   });
      // })
      // .catch(() => {
      //   this.$message({
      //     type: "info",
      //     message: "已取消删除",
      //   });
      // });
    },
    jumpAdd() {
      this.$router.push("./add");
    },
  },
};
</script>
<style scoped>
/* .div{
  justify-content: space-between;
} */
.el-breadcrumb{
  position: relative;
  z-index: 1;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /* fixed 定位覆盖页面 */
  z-index: 9999; /* 层叠放到很高的一个位置，盖在页面上 */
  mix-blend-mode: hard-light; /* 混合模式，反色 */
  background-color: rgba(194, 196, 88, 0.249);
  /* background-color: rgb(109, 82, 113);  */
  /* 结合混合模式做反色处理的对比色 */
  pointer-events: none; /* 作为一个层覆盖在元素上，但不能妨碍页面元素点击，添加一个穿透效果 */
}
.footer{
  position: relative;
  z-index: 1;
}
</style>